<template>
  <div>
    <m-shelf title="我的评价">
      <div slot="content">
        <el-card style="margin:5px 5px 15px; width:978px" v-for="item in comList" :key="item.id">
          <div slot="header" class="clearfix">
            <div class="comment-box">
              <div class="comment-img" @click="goodsDetails(item.mp_good.id)">
                <el-image style="width: 80px" :src="'http://127.0.0.1:8000/' + item.mp_good.goods_Bigimg"> </el-image>
              </div>
              <div style="margin-left: 15px; cursor: pointer;">
                <span class="good-title" @click="goodsDetails(item.mp_good.id)">{{ item.mp_good.goods_name }}</span>
                <h3 @click="goodsDetails(item.mp_good.id)">{{ item.mp_good.goods_describe }}</h3>
                <span style="display:flex">
                  与商品描述相符
                  <el-rate v-model="item.score" :colors="colors" show-text disabled > </el-rate>
                </span>
              </div>
              <el-button class="del-btn" type="danger" size="mini" @click="delCom(item.id)">删除评价</el-button>
            </div>
          </div>
          <div v-if="item.comment">
            <div class="ql-editor" v-html="item.comment"></div>
          </div>
        </el-card>
      </div>
    </m-shelf>
    <div style="float:right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import MShelf from '../../../components/shelf.vue'
import { getComment, delComment } from '../../../api/comment'

export default {
  name: "Comment",
  data() {
    return {
      // 评价的查询参数
      queryInfo: {
        pageNum: 1,
        pageSize: 5
      },
      // 评价列表
      comList: [],
      // 评价总数
      total: null,
      // 评分星星的颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
    }
  },
  created() {
    this.getComList()
  },
  methods: {
    // 获取自己的商品评价
    async getComList() {
      const { data: res } = await getComment(this.queryInfo)

      if(res.code !== 0) {
        return this.$notify.error({
          title: '警告',
          message: '获取评论列表失败！'
        })
      }
      console.log(res.result)
      this.comList = res.result.list
      this.total = res.result.total
    },
    // 监听一页显示条数变化的函数
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getComList()
    },
    // 监听页码变化的函数
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getComList()
    },
    // 查看商品详情
    goodsDetails(id) {
      window.open('//' + window.location.host + `/#/goodsDetail/${Number(id)}`)
    },
    // 删除评价
    async delCom(id) {
      // 弹框确认用户是否删除数据
      const confirmResult = await this.$confirm('是否确认删除该评价？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).catch(err => err)

      // 如果用户确认删除，则返回字符串 confirm,取消则是 cancel
      if (confirmResult !== 'confirm') {
        return 
      }
      const { data: res } = await delComment(id)

      if(res.code !== 0) {
        return this.$notify.error({
          title: '警告',
          message: '删除评论失败！'
        })
      }
      this.getComList()
    }
  },
  components: {
    MShelf
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  display: flex;
  content: "";
}
.clearfix:after {
  clear: both
}

.comment-box {
  display: flex;
  justify-items: center;
  align-items: center;
  .comment-img {
    cursor: pointer;
  }
  .good-title {
    line-height: 1.2;
    font-size: 16px;
    color: #424242;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
  }
  h3 {
    line-height: 1.2;
    font-size: 12px;
    color: #d0d0d0;
    padding: 10px;
    margin-left: -5px;
  }
  .del-btn {
    margin-left: 510px;
  }
}

.ql-editor {
  height: 300px;
}

</style>